function createTextNode(nodeValue) {
    return {
        type: 'TEXT_ELEMENT',
        props: {
            nodeValue,
            children: []
        }
    }
}

function createElement(type, props, ...children) {
    return {
        type,
        props: {
            ...props,
            // 下面的child未来会补齐，其余元素
            children: children.map(child => typeof child === 'string' ? createTextNode(child) : child),
        }
    }
}

function render(el, container) {
    // 创建DOM
    const dom = el.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(el.type)

    // 属性 id class 等等
    Object.keys(el.props).forEach((key) => {
        if (key !== "children") {
            dom[key] = el.props[key]
        }
    })

    const children = el.props.children
    if (children.length != 0) {
        children.forEach((child) => {
            render(child, dom)
        })
    }
   
    // 渲染DOM
    container.append(dom)
}

const React = {
    createElement,
    render
}

export default React